<template>
  <div id="backconk">
    <div class="meituan-content">
      <div class="login-cont">
        <div class="meituan-title">安智后台管理系统</div>
        <div class="meituan-user">
          <p>账号</p>
          <el-input
            v-model="account"
            class="inptflex"
            placeholder="请输入账号"
          />
        </div>
        <div class="meituan-user">
          <p>密码</p>
          <el-input
            v-model="password"
            class="inptflex"
            placeholder="请输入密码"
            type="password"
            show-password
          />
        </div>

        <div class="reg-view" @click="regi = regi === '登录' ? '注册' : '登录'">
          <!-- <p>{{ regi }}</p> -->
        </div>

        <el-button
          v-if="regi == '注册'"
          @click="signin"
          type="success"
          class="meituan-btn"
          >登录</el-button
        >
        <!-- <el-button v-else type="success" @click="register" class="meituan-btn">注册</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';  
  

export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const { proxy } = getCurrentInstance();
    const user = reactive({
      account: "",
      password: "",
      regi: "注册",
    });

    const signin = () => {
      if (user.account == "anzhitek" && user.password == "56785678") {
        store.commit('setLoggedIn', true); 
        router.push("/");
      }
    };
    // const register = async () => {
    //   // const requestInstance = new proxy.$request(); // 使用类来创建实例

    //   const obj = { account: user.account, password: user.password };
    //   const res = await new proxy.$request(
    //     proxy.$urls.m().register,
    //     obj
    //   ).modePost();
    //   console.log(res);
    // };
    return { ...toRefs(user), signin};
  },
};
</script>

<style scoped>
#backconk {
  background-image: url(@/assets/beijing.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  min-height: 100vh;
}
.meituan-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login-cont {
  width: 500px;
  height: 300px;
  background: #808181;
  border-radius: 5px;
}

.meituan-title {
  text-align: center;
  color: #000000;
  font-size: 30px;
  padding-top: 30px;
  font-family: Arial, Helvetica, sans-serif;
}
.meituan-user {
  width: 400px;
  margin: 0 auto;
  padding-top: 30px;
  height: 40px;
  display: flex;
  align-items: center;
}
.meituan-user p {
  width: 50px;
  color: #000000;
  font-size: 16px;
}

.inptflex {
  flex: 1;
}
.reg-view {
  width: 400px;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  padding-top: 10px;
}
.reg-view p {
  display: contents;
  cursor: pointer;
}
.meituan-btn {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 0 auto;
  font-size: 16px;
}
</style>>

